<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <title>Dive Into HTML5</title>
                <script src="modernizr.js"></script>
        </head>
        <body>
                <script>
                        var $ = function(id) {
                                return document.getElementById(id);
                        }
                        
                </script>
                
                <h1> Browser HTML5 support </h1>
                <li>Canvas: <span id="canvas"></span></li>
                <li>Video: <span id="video"></span></li>
                <li>Worker: <span id="worker"></span></li>
                <li>Offline App: <span id="offline"></span></li>
                <li>Geolocation: <span id="geolocation"></span></li>
                
                
                <script>
                        if (Modernizr.canvas) {
                                $("canvas").textContent = "Yes";
                        } else
                                $("canvas").textContent = "No";
                      
                        if (Modernizr.video) {
                                $("video").textContent = "Yes";
                        }else
                                $("video").textContent = "No";
                                
                        if (Modernizr.webworkers) {
                                $("worker").textContent = "Yes";
                        }else
                                $("worker").textContent = "No";
 
                        if (Modernizr.applicationcache) {
                                $("offline").textContent = "Yes";
                        }else
                                $("offline").textContent = "No";
 
                        if (Modernizr.geolocation) {
                                $("geolocation").textContent = "Yes";
                        }else
                                $("geolocation").textContent = "No";
 
 
                </script>
        </body>
</html>
